import React, { useState, useMemo } from 'react';

export   function TestUseMemo() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // 未优化的计算 - 每次渲染都会执行
  const unoptimizedCalculation = () => {
    console.log('执行未优化的计算');
    return count * 2;
  };

  // 使用useMemo优化的计算
  const optimizedCalculation = useMemo(() => {
    console.log('执行优化的计算');
    return count * 2;
  }, [count]); // 仅在count变化时重新计算

  return (
    <div>
      <h2>useMemo演示</h2>
      <button onClick={() => setCount(c => c + 1)}>增加计数: {count}</button>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入内容观察控制台"
      />

      <p>未优化计算结果: {unoptimizedCalculation()}</p>
      <p>优化计算结果: {optimizedCalculation}</p>
    </div>
  );
}